<template>
  <div >
    <div class="accept-container">
      <a-row>
        <a-alert id="show-alert" size="medium " :message ="resultText"  :type="typeInfo" center show-icon />
      </a-row>
    </div>
    <iframe id="show-iframe0"  frameborder=0   src="" ></iframe>
    <iframe id="show-iframe1"  frameborder=0   src="" ></iframe>
    <iframe id="show-iframe2"  frameborder=0   src="" ></iframe>
    <iframe id="show-iframe3"  frameborder=0   src="" ></iframe>
    <iframe id="show-iframe4"  frameborder=0   src="" ></iframe>
    <div ><a-row>
      <a-button type="primary"  size="medium" @click="startService"> {{ $t('spacenet.startService') }}</a-button>
      <a-button type="primary" size="medium" @click="stopService"> {{ $t('spacenet.stopService') }}</a-button>
    </a-row>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      typeInfo: 'error',
      resultText: '',
      iframeState: false,
      link: 'https://www.yunlink.hn.cn/api.php?op=editNode&mac=',
      macAddr: '',
      activeName: 'first',
      devices: [],
      curRx: 0,
      curTx: 0,
      peakRx: 0,
      peakTx: 0,
      avgRx: 0,
      avgTx: 0,
      processes: [],
      curDev: null
    }
  },
  methods: {
    showIframe () {
      this.iframeState = true
    },
    checkStatus () {
      this.resultText = 'Services Not Run'
      this.showResult = true
      this.typeInfo = 'error'
      this.$rpc.call('system', 'process_list').then(r => {
        this.processes = r.processes
        this.processes.forEach((item) => {
          if (item.command.search('/usr/bin/obfs-local') !== -1) {
            this.resultText = 'Services is Run'
            this.showResult = true
            this.typeInfo = 'success'
          }
        })
      })
    },
    startService () {
      this.$system.initRestart('ss-yunlink').then(this.checkStatus())
    },
    stopService () {
      this.$system.initStop('ss-yunlink').then(this.checkStatus())
    },
    changeIframeStyleAndGetIfrmeObj (IframeID) {
      const oIframe = document.getElementById(IframeID)
      if (oIframe) {
        const deviceWidth = document.documentElement.clientWidth / 2
        oIframe.style.width = deviceWidth + 'px'
        oIframe.style.height = oIframe.clientHeight + 20 + 'px'
        if (IframeID === 'show-iframe0') {
          const showAlert = document.getElementById('show-alert')
          showAlert.style.width = oIframe.clientWidth / 2 + 'px'
        }
      }
      return oIframe
    },
    requestDataByIframe (macLow, oIframeObj) {
      const mac = macLow.split(':')
      this.macAddr = mac[0] + mac[1] + mac[2] + mac[3] + mac[4] + mac[5]
      oIframeObj.src = this.link + this.macAddr.toUpperCase()
    }
  },
  mounted: function () {
    try {
      this.$rpc.ubus('network.device', 'status').then((r) => {
        let i = 0
        if (Object.keys(r).length > 6) {
          for (const key in r) {
            if (key.match(/^eth[1-5]$/)) {
              const oIframe = this.changeIframeStyleAndGetIfrmeObj('show-iframe' + (i))
              const macLow = r[key].macaddr
              if (oIframe) {
                this.requestDataByIframe(macLow, oIframe)
              }
              i++
            }
          }
        }
        if (i === 0) {
          const oIframe = this.changeIframeStyleAndGetIfrmeObj('show-iframe' + (i))
          if (oIframe) {
            const macLow = r.eth0.macaddr
            this.requestDataByIframe(macLow, oIframe)
          }
          i++
        }
        for (let j = i; j < 6; j++) {
          const oIframe = this.changeIframeStyleAndGetIfrmeObj('show-iframe' + j)
          if (oIframe) {
            oIframe.style.display = 'none'
          } else {
            break
          }
        }
      })
    } catch (e) {
    }
    this.checkStatus()
  }

}
</script>
